@CHARSET "UTF-8";
/* 초기설정 */
* {margin: 0; padding: 0;}
a {text-decoration:none;}
ul {list-style-type: none;}
.clearfix:before, .clearfix:after{content:" "; display:table;}
.clearfix:after{clear:both;}
.clearfix {*zoom:1;}
.col1, .col2{width:99%; margin:1em auto;}

/* ----------------------------------------------------------------------------- */
.center{width:1200px; float:left;}
.window8 {
	position:relative;
	margin: 0 auto;
	width: 100%;
	padding: 1em;
	-webkit-transform: translateX(-200px);
	-ms-transform: translateX(200px);
	transform: translateX(200px);
	opacity: 0;
	-webkit-animation: start 1s ease-out forwards;
	-ms-animation: start 1s ease-out forwards;
	animation: start 1s ease-out forwards;
}

@-webkit-keyframes cut{
	0%{-webkit-transform: translateX(200px); -webkit-transform:rotateX(0); opacity:0;}
	50%{opacity:0;}
	100%{-webkit-transform: translateX(0); -webkit-transform:rotateX(180deg); opacity:1;}
}
@-webkit-keyframes start { 
	0%{-webkit-transform: translateX(-200px); opacity: 0}
	50%{opacity:1}
	100%{-webkit-transform:translateX(0); opacity:1}
}
@-ms-keyframes start { 
	0%{-ms-transform: translateX(200px); opacity: 0}
	50%{opacity:1}
	100%{-ms-transform:translateX(0); opacity:1}
}
@keyframes start { 
	0%{transform: translateX(200px); opacity: 0}
	50%{opacity:1}
	100%{transform:translateX(0); opacity:1}
}

@media screen and (min-width: 1600px) {
  .col1, .col2, .col3{float:left; margin-right: 1%; width: 49%;}
}
@media screen and (min-width: 10px){
	.col1, .col2, .col3{float:left; margin-right:.5%; width:31%;}
	.col3{margin-right:0;}
	.col1{margin-left:2em;}
}

.tile{
	float:left;
	margin:0 auto 1%;
	color:white;
	font-size:1.3em;
	text-align:center;
	height:8em;
	font-weight:300;
	overflow:hidden;
	cursor:pointer;
	position:relative;
	background-color: #fff;
	color:#333;
	position:relative;
	-webkit-transition:background-color 0.2s ease-out;
	-ms-transition:background-color 0.2s ease-out;
	transition:background-color 0.2s ease-out;
}

.tile-big {width:100%;}
.tile img {width:100%; height:70%;}
.tile div {
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	width:100%;
	height:100%;
	text-align:center;
	display:table;
	padding:0 -1em;
	-webkit-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;
}
.tile div p {display:table-cell; vertical-align:middle; font-family: 'Lobster', cursive;}
.tile:hover .caption-left{left:0;}

.faces {
	-webkit-transform-style:preserve-3d;
	-webkit-transition: -webkit-transform 1s;
	transform-style: preserve-3d;
	transition:transform 1s;
}
.faces div{
	display:block;
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	width:100%;
	height:100%;
	float:left;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}

.faces .fronted{background-color:#455962; color:#ddd;}
.faces .backed{background-color:#455962; color:#ddd;}
/*styling the individual tiles*/



/* col1 박스 -------------------------------------------------*/
/*1번째 박스 */
.tile-1{background-color:#56D9C9; color:white;}
.tile-1 p{font-size:1.3em;}
.tile-1 p a{display:table;}
.slideTextUp div:nth-child(2){top:100%;}
.slideTextUp:hover div{-webkit-transform:translateY(-90%); -webkit-transition:1s ease-out; -ms-transform:translateY(-90%); -ms-transition:1s ease-out; transform:translateY(-90%); transition:1s ease-out;}

/* 2번째 박스 */
.tile-2{background-color:#455962; color:white;}
.tile-2:hover{background-color:white; color:#455962;}
.tile-2 p a{display:table;}
.tile-small{width:49%; margin-right:2%;}
.slideTextRight div:first-child{left:-100%}
.slideTextRight:hover div{-webkit-transform:translateX(100%); -ms-transform:translateX(100%); transform:translateX(100%);}

/* 3번째 박스 */
.tile-3{background-color:#ddd; color:#455962;}
.tile-3:hover{background-color:white; color:#455962;}
.tile-3 p{text-align:middle;}
.tile-3 p a{display:table;}
.slideTextLeft div:first-child{right:100%}
.slideTextLeft:hover div{-webkit-transform:translateX(-100%); -ms-transform:translateX(-100%); transform:translateX(-100%);}
.tile-small.last{margin-right:0;}

/* 4번쨰 박스 */
.tile-4 div p:first-child{top:100%}
.slideTextUp2 div:first-child{up:50%;}
.slideTextUp2:hover div{-webkit-transform:translateY(-40%); -webkit-transition:1s ease-out; -ms-transform:translateY(-40%); -ms-transition:1s ease-out; transform:translateY(-40%); transition:1s ease-out;}
.tile-caption{
	position:absolute;
	z-index:1;
	background-color:#455962;
	color:#fff;
	font-size:1em;
	padding:1em;
	text-align:left;
	font-family: 'Lobster', cursive;
}
.caption-left{
	left:-100%;
	top:0;
	bottom:0;
	width:40%;
	-webkit-transition:left .3s linear;
	-ms-transition:left .3s linear;
	transition:left .3s linear;
}

/* --------------------------------------------------------------- */

/* col2 박스 -------------------------------------------------*/

/* 1번째 박스 */
.tile-5{background-color:#FCC120; color:white;}
/* .tile-5:hover{background-color:#fff; color:#FCC120;} */
.slideTextDown div:first-child{top:100%;}
.slideTextDown:hover div{-webkit-transform:translatey(-100%);}

/* 2번째 박스 */
.tile-6{background-color:#3EC7F3;}
.slideTextLeft div:nth-child(2){left:100%;}
.slideTextLeft:hover div{-webkit-transform:translateX(-100%); -ms-transform:translateX(-100%); transform:translateX(-100%);}

/* 3번째 박스 */
.tile-7{background-color:transparent;}
#back{padding:0px;}
.backed img{width:100%;	height:100%;}
.rotate3d{-webkit-perspective:800px; -ms-perspective:800px; perspective:800px; overflow:visible;}
.rotate3dX .fronted{background:url(../images/img18.jpeg) no-repeat center center; background-size:100% 100%;}
.rotate3dX .backed{-webkit-transform:rotateX(180deg); -ms-transform:rotateX(180deg); transform:ratateX(180deg);}
.rotate3dX:hover .faces:hover{-webkit-transform:rotateX(180deg); -ms-transform:rotateX(180deg); transform:rotateX(180deg);}

/* 4번째 박스 */
.tile-8{background-color:transparent;}
.rotate3dY .fronted{background:url(../images/img19.jpg) no-repeat center center; background-size:100% 100%;}
.rotate3dY .backed{-webkit-transform:rotateY(180deg); -ms-transform:rotateY(180deg); transform:rotateY(180deg);}
.rotate3dY:hover .faces:hover{-webkit-transform:rotateY(180deg); -ms-transform:rotateY(180deg); transform:rotateY(180deg);}
/* col2 박스 끝------------------------------------------------------------------------------*/


/* col3 박스 -------------------------------------------------------------------------------*/





/* /* 1번째 박스
.tile-2xbig{height:337px; width:100%;}
.slideTextDown2 div:first-child{top:50%;}
.slideTextDown2:hover div{-webkit-transform:translatey(31%);}
.caption-bottom{left:0; bottom:0; right:0; height:38%;}
1번째 박스 끝-----------------------------------------------------------------------------

2번째 박스
.tile-10 {
  background-color: white;
  color: white;
}

.tile-10:hover {
  background-color: white;
  color: #F0514A;
  -webkit-animation:swing 0.8s ease-out;
  animation:flipInX;
}


@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
} */


/* col3 박스 끝 -------------------------------------------------------------------------------*/

::-webkit-scrollbar{width: 20px;}
::-webkit-scrollbar-thumb{background: #fff;}
::-webkit-scrollbar-track{background: #ddd;}